<style>
    .role-list-form dl {
        display: block
    }

    .role-list-form-top {
        border: 1px solid #f9f9f9
    }

    .role-list-form dl dt {
        display: block;
        background-color: #f9f9f9;
        padding: 0 10px 10px 10px
    }

    .role-list-form dl dd {
        display: block;
        padding: 0 15px;
        overflow: hidden
    }

    .role-list-form dl dd dl dt {
        background: 0
    }

    .role-list-form dl dd dl dd {
        padding: 0 25px
    }

    .role-list-form dl dd dl dd dl dd {
        padding: 0 35px
    }

    .role-list-form dl dd dl dd dl dd a {
        display: inline-block
    }

    .role-list-form-dd dl {
        display: inline-block
    }
    .layui-card-header-sj{
        margin-top: 10px; margin-bottom: 10px; margin-left: -15px;
    }
</style>
<script id="page1" type="text/html">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form" lay-filter="layuiadmin-form-useradmin">
                <input type="hidden" name="uid" value="{{layui.router().search.id}}">
                <div class="layui-card-header">基础信息</div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" value="{{ d.data.user.name || '' }}" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">中文名</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" value="{{ d.data.user.cn_name || '' }}" readonly>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" value="{{ d.data.user.role || '' }}" type="text" name="role">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" value="{{ d.data.user.phone || '' }}" type="text"
                                       name="phone">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-header">操作权限</div>
                <div class="layui-card-body">
                    <div class="layui-form-item role-list-form">
                        {{# for( var k1 in d.data.permission){
                        var v1=d.data.permission[k1];
                        }}
                        {{# if(v1['id']==20000){  }}
                        <div class="layui-card-header layui-card-header-sj">数据权限</div>
                        {{# } }}
                        <dl class="role-list-form-top">
                            <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{{ v1['id'] }}"
                                       data-parent="0" data-level="1" lay-skin="primary" title="{{v1['title']}}"></dt>
                            <dd class="role-list-form-dd">
                                {{# for(var k2 in v1['childs']){
                                var v2=v1['childs'][k2];
                                }}
                                <dl>
                                    <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth" value="{{v2['id']}}"
                                               data-pid="{{v2['pid']}}" data-level="2" lay-skin="primary"
                                               title="{{v2['title']}}"></dt>
                                    <dd>
                                        {{# for( var k3 in v2['childs']){
                                        var v3=v2['childs'][k3];
                                        }}
                                        <dl>
                                            <dt><input type="checkbox" name="auth[]" lay-filter="roleAuth"
                                                       value="{{v3['id']}}" data-pid="{{v3['pid']}}" data-level="3"
                                                       lay-skin="primary" title="{{v3['title']}}"></dt>
                                            <dd>
                                                {{# for( var k4 in v3['childs']){
                                                var v4=v3['childs'][k4];
                                                }}
                                                <input type="checkbox" name="auth[]" lay-filter="roleAuth"
                                                       value="{{v4['id']}}" data-pid="{{v4['pid']}}" data-level="4"
                                                       lay-skin="primary" title="{{v4['title']}}">
                                                {{# } }}
                                            </dd>
                                        </dl>
                                        {{# } }}
                                    </dd>
                                </dl>
                                {{# } }}
                            </dd>
                        </dl>
                        {{# } }}
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-inline">
                            <input type="button" lay-submit lay-filter="LAY-submit" value="确认"
                                   class="layui-btn LAY-submit">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</script>
<div id="view"></div>


<script>
    layui.use(['admin', 'form', 'toolJ', 'laytpl'], function () {
        var $ = layui.$
            , form = layui.form
            , laytpl = layui.laytpl
            , toolJ = layui.toolJ
            , view = layui.view;
        //解析模板,自动勾选
        var id= layui.router().search.id;
        toolJ.ajax({"data": {"id":id}, "type": "get"},
            function (data) {
                var formData = data.data.user.auth.split(',');
                var getTpl = page1.innerHTML
                    , view = $('#view');
                laytpl(getTpl).render(data, function (html) {
                    view.html(html);
                });
                form.render(null, 'layuiadmin-form-useradmin');

                for (var i in formData) {
                    $('.role-list-form input[value="' + formData[i] + '"]').prop('checked', true);
                }
                form.render('checkbox');
            }
        );
        form.on('checkbox(roleAuth)', function(data) {
            var child = $(data.elem).parent('dt').siblings('dd').find('input');
            /* 自动选中父节点 */
            var check_parent = function (id) {
                var self = $('.role-list-form input[value="'+id+'"]');
                var pid = self.attr('data-pid') || '';
                self.prop('checked', true);
                if (pid == '') {
                    return false;
                }
                check_parent(pid);
            };
            /* 自动选中子节点 */
            child.each(function(index, item) {
                item.checked = data.elem.checked;
            });
            check_parent($(data.elem).attr('data-pid'));
            form.render('checkbox');
        });
    })
</script>